import './index.less';

import React, {useEffect} from 'react';
import {TabBar} from 'antd-mobile';
import {history} from 'umi';
import {BsHouseDoorFill, BsHouseDoor, BsBagFill, BsBag, BsPersonFill, BsPerson} from 'react-icons/bs';

export default ({show, pathname}: { show: boolean, pathname: string }) => {
  const tabItems = [
    {
      title: '首页',
      selectedIcon: <BsHouseDoorFill style={{fontSize: '1.5rem'}}/>,
      icon: <BsHouseDoor style={{fontSize: '1.5rem'}}/>,
      link: '/'
    },
    {
      title: '订单',
      selectedIcon: <BsBagFill style={{fontSize: '1.5rem'}}/>,
      icon: <BsBag style={{fontSize: '1.5rem'}}/>,
      link: '/order'
    },
    {
      title: '我的',
      selectedIcon: <BsPersonFill style={{fontSize: '1.5rem'}}/>,
      icon: <BsPerson style={{fontSize: '1.5rem'}}/>,
      link: '/user'
    },
  ]

  useEffect(() => {

  }, [])

  return (
    <div className='menu-bar'>
      <TabBar hidden={!show}>
        {tabItems.map(item => (
          <TabBar.Item
            key={item.link}
            title={item.title}
            icon={item.icon}
            selectedIcon={item.selectedIcon}
            selected={pathname === item.link}
            onPress={() => history.push(item.link)}
          />
        ))}
      </TabBar>
    </div>
  )
}
